<template>
  <div class="logoset">
    <h2>企业信息设置</h2>
    <div class="row">
      <div class="logoset-item">
        <h4>企业PC端Logo:</h4>
        <div class="logoset-item__company">
          <div
            class="logoset-item__left"
            v-if="companyInfo.thumbnailLogo != ''"
          >
            <el-image
              style="width: 72px; height: 72px"
              :src="companyInfo.thumbnailLogo"
              :zoom-rate="1.2"
              :preview-src-list="srcList"
              :initial-index="1"
              fit="cover"
            />
          </div>
        </div>
      </div>
      <div class="logoset-item">
        <h4>企业简称:</h4>
        <div>{{ companyInfo.shortName }}</div>
      </div>
    </div>
    <div class="row2">
      <div class="logoset-item">
        <h4>企业地址:</h4>
        <div>
          {{
            companyInfo.province +
            companyInfo.city +
            companyInfo.area +
            companyInfo.address
          }}
        </div>
      </div>
      <div class="logoset-item">
        <h4>法定代表人:</h4>
        <div>{{ companyInfo.legalName }}</div>
      </div>
    </div>
    <div class="row">
      <div class="logoset-item">
        <h4>手机号:</h4>
        <div>{{ companyInfo.legalTel }}</div>
      </div>
      <div class="logoset-item">
        <h4>成立日期:</h4>
        <div>{{ companyInfo.establishDate }}</div>
      </div>
    </div>
    <div class="row2">
      <div class="logoset-item">
        <h4>企业规模:</h4>
        <div>{{ companyInfo.companySize }}</div>
      </div>
      <div class="logoset-item">
        <h4>所属行业:</h4>
        <div>{{ companyInfo.tradeName }}</div>
      </div>
    </div>
    <div style="width: 100%; text-align: right; margin-top: 20px">
      <el-button
        type="primary"
        style="width: 100px"
        v-waves
        @click="updateInfo()"
        :loading="loading"
        v-if="buttonDisplayOrNot(buttonCodes, 'qyUploadBtn')"
        >编辑</el-button
      >
    </div>
    <UpdateCompanyInfo
      :dialogVisible="dialogVisible"
      :companyInfo="companyInfo"
      @closeDialog="closeDialog"
      @submitDialog="submitDialog"
    ></UpdateCompanyInfo>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  watch,
  reactive,
  onMounted,
  getCurrentInstance,
  defineAsyncComponent
} from 'vue'
import {
  ElLoading,
  UploadProps,
  UploadUserFile,
  ElMessageBox
} from 'element-plus'
import { ElMessage } from 'element-plus'
import { uploadFileApi, getAuthorizedUrlApi } from '/@/api/publicApi'
import {
  getCompanyInfo,
  updateCompanyInfo
} from '/@/api/setting/enterpriseInfo'
import { useQiyeInfo } from '/@/stores/qiyeInfo'
import { buttonDisplayOrNot } from '../../../utils/buttonBoolean'
import { getButtonListByRoleApi } from '/@/api/publicApi'
import { Session } from '/@/utils/storage'
const UpdateCompanyInfo = defineAsyncComponent(
  () => import('./UpdateCompanyInfo.vue')
)
const menu = Session.get('menu')
const buttonCodes = ref<any>([])
const loading = ref<any>(false)
const stores = useQiyeInfo()
const token = JSON.parse(sessionStorage.getItem('shebei') as any).token
const headers = {
  'Content-Type': 'multipart/form-data',
  'API-User-Token': token
}
const { proxy } = getCurrentInstance() as any

let companyInfo = reactive({
  id: '',
  logo: '',
  thumbnailLogo: '',
  mobileTerminalType: '',
  shortName: '',
  province: '',
  provinceId: '',
  city: '',
  cityId: '',
  area: '',
  areaId: '',
  address: '',
  legalName: '',
  legalTel: '',
  establishDate: '',
  companySize: '',
  tradeName: ''
})
let uploadLoading = ref([false, false, false])
const fileList = ref<UploadUserFile[]>([])
const srcList = ref<any>([])
const getInfo = async () => {
  let res = await getCompanyInfo()
  if (res.code == 0) {
    companyInfo.id = res.data.id
    companyInfo.logo = res.data.logo
    companyInfo.thumbnailLogo = res.data.thumbnailLogo
    companyInfo.mobileTerminalType = res.data.mobileTerminalType
    companyInfo.shortName = res.data.shortName
    companyInfo.province = res.data.province
    companyInfo.provinceId = res.data.provinceId
    companyInfo.city = res.data.city
    companyInfo.cityId = res.data.cityId
    companyInfo.areaId = res.data.areaId
    companyInfo.area = res.data.area
    companyInfo.address = res.data.address
    companyInfo.legalName = res.data.legalName
    companyInfo.legalTel = res.data.legalTel
    companyInfo.establishDate = res.data.establishDate
    companyInfo.companySize = res.data.companySize
    companyInfo.tradeName = res.data.tradeName
    srcList.value[0] = companyInfo.thumbnailLogo
  }
}

onMounted(() => {
  getInfo()
  menu.forEach(async (element: any) => {
    if (element.menuUrl == '/setting/EnterpriseInfo') {
      let res = await getButtonListByRoleApi({
        terminalType: 1,
        menuPid: element.id
      })
      res.data.forEach((item: any) => {
        buttonCodes.value.push(item.buttonCode)
      })
    }
  })
})

//更新企业信息
const handleSave = async (form: any) => {
  let res = await updateCompanyInfo(form)
  if (res.code == 0) {
    ElMessage.success('编辑成功')
    Session.remove('qiye')
    getCompanyInfo().then((r) => {
      if (res.code == 0) {
        Session.set('qiye', r.data)
        stores.setQiyeInfos()
        getInfo()
      }
    })
  } else {
    return
  }
}

//编辑企业信息
const dialogVisible = ref(false)
const updateInfo = () => {
  dialogVisible.value = !dialogVisible.value
}

const closeDialog = () => {
  dialogVisible.value = !dialogVisible.value
}

const submitDialog = (form: any) => {
  handleSave(form)
  dialogVisible.value = !dialogVisible.value
}
</script>

<style scoped lang="scss">
.logoset {
  h2 {
    font-size: var(--next-font-size18);
    color: #2b2b2b;
    font-weight: 700;
    margin-bottom: 12px;
  }

  &-item {
    width: 50%;
    display: flex;
    align-items: center;
    // margin-bottom: 30px;
    h4 {
      font-size: var(--el-font-size-base);
      color: #2b2b2b;
      font-weight: 400;
      margin-right: 20px;
      margin-bottom: 0;
    }

    &__company {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      margin-top: 12px;
    }

    &__left {
      border-radius: 4px;
      margin-right: 24px;
      cursor: pointer;

      img {
        height: 100%;
        width: 100%;
      }
    }

    &__right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}

.tips {
  font-size: 12px;
  color: #8c8c8c;
}

.set {
  margin-top: 5px;
}

.tips-buttom {
  text-align: center;

  .tiaokuan {
    color: rgb(0, 132, 255);
    cursor: pointer;
  }
}

.row {
  display: flex;
  padding: 16px 40px;
}
.row2 {
  display: flex;
  padding: 16px 40px;
  background-color: rgba(240, 241, 242, 1);
}
</style>
